<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            padding-bottom: 800px;
        }
        .box{
            border: 1px solid black;
            padding: 20px;
        }
        .btn{
            display: inline-block;
            padding: 6px 12px;
            margin: 4px;
            line-height: 2;
            background-color: burlywood;
            cursor: pointer;
            user-select: none;
        }
        .btn:active{
            background-color: #ae8f67;
        }
    </style>
</head>
<body>
    <div id="app" class="box">
        <h4>父组件</h4>
        <p>msg:{{ msg }}</p>
        <input type="button" value="打印事件源" @click="printEvent()">
        <!-- vue绑定的事件回调如果没有定义(),vue通过call进行调用，同时提供事件源对象数据参数 -->
        <input type="button" value="打印事件源" @click="printEvent">
        <hr>
        <!-- 子向父进行数据传递，使用的事件绑定规则，接收的默认参数其实就是自定义事件的事件源 -->
        <!-- <comp-one @update:msg="updateMsg"></comp-one> -->
        <!-- 在子向父进行数据传递时，数据是以自定义事件源的方式进行回传的，所以在子组件事件绑定时如果必须定义（）可以通过$event接收子组件数据 -->
        <comp-one @update:msg="updateMsg($event)"></comp-one>
        <hr>
        <!-- 
            vue2.0 在标签事件绑定后，程序对组件进行解析，组件上的所有的事件都会被主动完成拦截，不会将事件进行传递
                   触发事件帮定时使用了 .native 修饰符，事件会主动传递到根元素上
            vue3.0 在标签事件绑定后，程序读组件进行解析，组件上的事件如果没有被拦截，该事件会传递到组件的根元素上
                   vue3如果出现多根标签结构，那么vue也无法决定传递的事件如果绑定，此时可以通过v-bind="$attrs" 方式手动完成操作
        -->
        <!-- vue2 -->
        <my-btn @click.native="showTip()"></my-btn>
        <!-- vue3 -->
        <my-btn @click="showTip()"></my-btn>
        <hr>
        <comp-two @click="showTip()"></comp-two>
    </div>

    <script type="text/x-template" id="compOne">
        <div class="box">
            <h4>子组件</h4>
            <p>msg:{{ msg }}</p>
            <input type="button" value="发送msg" @click=" $emit('update:msg',msg) ">
        </div>
    </script>
    <script type="text/x-template" id="myBtn">
        <div class="btn">按钮</div>
    </script>
    <script type="text/x-template" id="compTwo">
        <div class="box" v-bind="$attrs">组件2的第一个根元素</div>
        <div class="box">组件2的第二个根元素</div>
    </script>

    <script type="module"> 
        import { createApp } from "../../assets/vue3/vue.esm-browser.js";
        const app = createApp({
            data(){
                return {
                    msg:""
                }
            },
            methods: {
                updateMsg(nv) {
                    console.log(nv);
                    this.msg = nv;
                },
                printEvent(e){
                    console.log(e)
                },
                showTip(){
                    alert("提示")
                }
            },
        });
        
        app.component("CompOne",{
            template:"#compOne",
            emits:["update:msg"],
            data() {
                return {
                    msg: "子组件msg"
                }
            },
        })
        app.component("MyBtn",{
            template:"#myBtn"
        })
        app.component("CompTwo",{
            template:"#compTwo"
        })
        
        app.mount("#app");
    </script>
    <!-- <script type="module"> 
        import Vue from "../../assets/vue2/vue.esm.browser.js";
        Vue.component("CompOne",{
            template:"#compOne",
            data() {
                return {
                    msg: "子组件msg"
                }
            },
        })
        Vue.component("MyBtn",{
            template:"#myBtn"
        })
        new Vue({
            el:"#app",
            data(){
                return {
                    msg:""
                }
            },
            methods: {
                updateMsg(nv) {
                    console.log(nv);
                    this.msg = nv;
                },
                printEvent(e){
                    console.log(e)
                },
                showTip(){
                    alert("提示")
                }
            },
        });
    </script> -->
</body>
</html>